<template>
  <div class="warn-filter-container">
    <van-tree-select
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <!-- 起止时间 -->
        <ul
          class="filter-list"
          v-if="active === 0"
        >
          <li @click="chooseDatetime(1)">
            <div class="tiem-box">
              <div>开始时间</div>
              <div class="reigth-text"><span class="tiem-value-text">{{startTime}}</span><i class="van-icon van-icon-arrow tiem-right-icon" />
              </div>
            </div>
          </li>
          <li @click="chooseDatetime(2)">
            <div class="tiem-box">
              <div>结束时间</div>
              <div class="reigth-text"><span class="tiem-value-text">{{endTime}}</span><i class="van-icon van-icon-arrow tiem-right-icon" />
              </div>
            </div>
          </li>
        </ul>
        <!-- 选择产线 -->
        <ul
          class="filter-list"
          v-if="active === 1"
        >
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in proLineList"
            :key="index"
            @click="chooseLine(item)"
          >
            <span>{{ item.number }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 报警类型 -->
        <ul
          class="filter-list"
          v-if="active === 2"
        >
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in policeType"
            :key="index"
            @click="choosePoliceType(item, index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 报警等级 -->
        <ul
          class="filter-list"
          v-if="active === 3"
        >
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in policeLevel"
            :key="index"
            @click="choosePoliceLevel(item, index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 处理进度 -->
        <ul
          class="filter-list"
          v-if="active === 4"
        >
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in managePlan"
            :key="index"
            @click="chooseManagePlan(item, index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
      </template>
    </van-tree-select>

    <div class="operate-box">
      <div
        class="operate-btn cancel-btn"
        @click="cancelFilter"
      >取 消</div>
      <div
        class="operate-btn"
        @click="submit"
      >确 定</div>
    </div>

    <van-popup
      v-model="showDateTimePicker"
      position="bottom"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :title="datetimePickerTitle"
        cancel-button-text="清除"
        @confirm="confirmFn"
        @cancel="cancelFn"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { TreeSelect, Icon, Popup, DatetimePicker } from 'vant';
import { getProductLineList } from '@/api/projectManage';

export default {
  name: 'SearchFilter',
  props: {
    projectId: Number // 项目id
  },
  components: {
    [TreeSelect.name]: TreeSelect,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  data() {
    return {
      active: 0,
      // 左侧数据
      items: [
        { text: '起止时间' },
        { text: '选择产线' },
        { text: '报警类型' },
        { text: '报警等级' },
        { text: '处理进度' }
      ],
      // 报警类型
      policeType: [
        { text: '报警', value: 1, checked: false },
        { text: '恢复', value: 2, checked: false }
      ],
      // 报警等级
      policeLevel: [
        { text: '一级', value: 1, checked: false },
        { text: '二级', value: 2, checked: false },
        { text: '三级', value: 3, checked: false },
        { text: '四级', value: 4, checked: false },
        { text: '五级', value: 5, checked: false }
      ],
      // 处理进度
      managePlan: [
        { text: '待确认', value: 1, checked: false },
        { text: '待处理', value: 2, checked: false },
        { text: '处理中', value: 3, checked: false },
        { text: '处理完成', value: 5, checked: false },
        { text: '已恢复', value: 6, checked: false }
      ],

      proLineList: [], // 产线列表
      allLineIds: [], // 所有产线id

      // 时间
      showDateTimePicker: false,
      currentDate: new Date(),
      datetimePickerTitle: '',
      startTime: '点击选择',
      endTime: '点击选择',
      datetimeType: ''
    };
  },
  created() {
    this.getProductLineListEvent();
  },
  methods: {
    // 获取产线列表
    getProductLineListEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProductLineList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            item.checked = false;
            this.allLineIds.push(item.ID);
          });
        }
        this.proLineList = res.data.list;
      });
    },

    // 选择起止时间
    chooseDatetime(type) {
      this.datetimePickerTitle = type === 1 ? '选择开始时间' : '选择结束时间';
      this.datetimeType = type;
      this.showDateTimePicker = true;
    },
    // 确认时间
    confirmFn(value) {
      let dateTime = dayjs(value).format('YYYY-MM-DD HH:mm');
      if (this.datetimeType === 1) {
        this.startTime = dateTime + ':00';
      } else {
        this.endTime = dateTime + ':59';
      }
      this.showDateTimePicker = false;
    },
    // 取消时间
    cancelFn() {
      if (this.datetimeType === 1) {
        this.startTime = '点击选择';
      } else {
        this.endTime = '点击选择';
      }
      this.showDateTimePicker = false;
    },

    // 选择产线
    chooseLine(item) {
      item.checked = !item.checked;
    },

    // 报警类型
    choosePoliceType(item, index) {
      if (!item.checked) {
        this.policeType.map((subItem, i) => {
          if (i === index) subItem.checked = true;
          else subItem.checked = false;
        });
      } else {
        item.checked = !item.checked;
      }
    },

    // 报警等级
    choosePoliceLevel(item, index) {
      if (!item.checked) {
        this.policeLevel.map((subItem, i) => {
          if (i === index) subItem.checked = true;
          else subItem.checked = false;
        });
      } else {
        item.checked = !item.checked;
      }
    },

    // 处理进度
    chooseManagePlan(item, index) {
      if (!item.checked) {
        this.managePlan.map((subItem, i) => {
          if (i === index) subItem.checked = true;
          else subItem.checked = false;
        });
      } else {
        item.checked = !item.checked;
      }
    },

    // 确定
    submit() {
      const params = {
        startTime: this.startTime !== '点击选择' ? this.startTime : '',
        endTiem: this.endTime !== '点击选择' ? this.endTime : '',
        project_line_id: '', // 产线id
        type: '', // 报警类型
        level: '', // 报警等级
        status: '' // 处理进度
      };
      // 判断产线是否选中
      let proLineIds = [];
      this.proLineList.map(item => {
        if (item.checked) proLineIds.push(item.ID);
      });
      // 选中时则为选中的产线id，为空时则为所有产线id
      if (proLineIds.length) params.project_line_id = proLineIds.join();
      else params.project_line_id = this.allLineIds.join();
      // 判断报警类型是否选中
      this.policeType.map(item => {
        if (item.checked) params.type = item.value;
      });
      // 判断报警等级是否选中
      this.policeLevel.map(item => {
        if (item.checked) params.level = item.value;
      });
      // 判断处理进度是否选中
      this.managePlan.map(item => {
        if (item.checked) params.status = item.value;
      });
      this.$emit('submit', params);
    },
    // 取消
    cancelFilter() {
      this.$parent.showWarnFilter = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.warn-filter-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .van-tree-select {
    flex: 1;
    z-index: 999;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: var(--color-primary);
  }

  .filter-list {
    padding: 0.16rem 0.426667rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .operate-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .operate-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 1.066667rem;
      color: #fff;
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: var(--color-primary);

      &.cancel-btn {
        color: var(--color-deep-gray);
        background-color: #fff;
        border: 1px solid var(--border-color);
      }
    }
  }
}

// 时间
.tiem-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .reigth-text {
    margin-top: -0.053333rem;
  }
  .tiem-value-text {
    color: #6f6d6d;
    font-size: 0.373333rem;
    margin-right: 0.133333rem;
  }
  .tiem-right-icon {
    color: #cccccc;
    font-size: 0.426667rem;
  }
}
</style>
